import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { messageHeaderDefaultProps } from './defaultProps';
import type { MessageHeaderOptions } from './type';

export interface MessageHeaderProps extends MessageHeaderOptions, HTMLAttributes<HTMLDivElement> {}

const MessageHeader: FC<MessageHeaderProps> = (props) => {
  const { className, children, forwardedRef, ...messageHeaderProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('header', className), ...messageHeaderProps },
    children,
  );
};

MessageHeader.displayName = 'MessageHeader';
MessageHeader.defaultProps = messageHeaderDefaultProps;

export default MessageHeader;
